<template>
	<el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="80px" label-position="top">
		<el-row :gutter="20">
			<el-col :span="24">
				<el-form-item label="类型" prop="type">
					<el-radio-group v-model="form.type" @change="typech">
						<el-radio v-model="form.type" label='banner'>轮播</el-radio>
						<el-radio v-model="form.type" label='menu'>菜单</el-radio>
						<el-radio v-model="form.type" label='tab'>选项卡</el-radio>
					</el-radio-group>

				</el-form-item>
			</el-col>
		</el-row>

		<el-row :gutter="20">
			<el-col :span="12">
				<el-form-item label="标题" prop="name">
					<el-input v-model="form.name" clearable></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="分组" prop="category">
					<el-input v-model="form.category" clearable></el-input>
				</el-form-item>
			</el-col>
		</el-row>

		<template v-if="form.type=='banner'">

			<div style="background: #f1f1f1;border-radius: 4px;padding: 10px">
				<el-row :gutter="20">
					<el-col :span="6">
						<el-form-item label="轮播名称">
							<el-input v-model="form.content.name" clearable></el-input>
						</el-form-item>
					</el-col><el-col :span="6">
						<el-form-item label="轮播样式">
							<el-input v-model="form.content.style" clearable></el-input>
						</el-form-item>
					</el-col><el-col :span="6">
						<el-form-item label="容器高度">
							<el-input v-model="form.content.height" clearable></el-input>
						</el-form-item>
					</el-col><el-col :span="6">
						<el-form-item label="容器边角弧度">
							<el-input v-model="form.content.radius" clearable></el-input>
						</el-form-item>
					</el-col><el-col :span="6">
						<el-form-item label="偏移x轴距">
							<el-input v-model="form.content.x" clearable></el-input>
						</el-form-item>
					</el-col><el-col :span="6">
						<el-form-item label="偏移y轴距">
							<el-input v-model="form.content.y" clearable></el-input>
						</el-form-item>
					</el-col>


				</el-row>
				<el-button @click="addlist">增加一行</el-button>

			<el-table
				:data="form.content.list"
				style="width: 100%"
				height="250"
				border
				:size="mini"
				>
				<el-table-column
					prop="image"
					label="轮播图"
					width="130">
					<template #default="scope">

								<sc-upload v-model="scope.row.image" :apiObj="uploadApi" :index="scope.$index" :on-success="success" :on-progress="progress" :width="100" :height="60">
									<div class="custom-empty">
										<i class="el-icon-upload"></i>
										<p>上传图片</p>
									</div>

								</sc-upload>


					</template>
				</el-table-column>
				<el-table-column
					prop="path"
					label="跳转路径"
					width="180">
					<template #default="scope">
						<el-input v-model="scope.row.path" clearable></el-input>
					</template>
				</el-table-column>
				<el-table-column
					prop="path_type"
					label="跳转类型">
					<template #default="scope">
						<el-input v-model="scope.row.path_type" clearable></el-input>
					</template>
				</el-table-column>
				<el-table-column
					prop="name"
					label="轮播图名称"  width="120">
					<template #default="scope">
						<el-input v-model="scope.row.name" clearable></el-input>
					</template>
				</el-table-column>
				<el-table-column
					prop="bgcolor"
					label="背景颜色"  width="120">
					<template #default="scope">
						<el-input v-model="scope.row.bgcolor" clearable></el-input>
					</template>
				</el-table-column>
				<el-table-column
					prop="path_name"
					label="路径名称"  width="120">
					<template #default="scope">
						<el-input v-model="scope.row.path_name" clearable></el-input>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="160">
					<template #default="scope">
						<el-button @click="dellist(scope.$index)">删除</el-button>
						<el-button @click="shangyi(scope.$index)">上移</el-button>

					</template>
				</el-table-column>
			</el-table>
			</div>
		</template>
		<template v-if="form.type=='menu'">
			<div style="background: #f1f1f1;border-radius: 4px;padding: 10px">
				<el-row :gutter="20">
					<el-col :span="6">
						<el-form-item label="菜单名称">
							<el-input v-model="form.content.name" clearable></el-input>
						</el-form-item>
					</el-col><el-col :span="6">
					<el-form-item label="每行显示">
						<el-input v-model="form.content.style" clearable></el-input>
					</el-form-item>
				</el-col>



				</el-row>
				<el-button @click="addlist">增加一行</el-button>

				<el-table
					:data="form.content.list"
					style="width: 100%"
					height="250"
					border
					:size="mini"
				>
					<el-table-column
						prop="image"
						label="图标"
						width="130">
						<template #default="scope">

							<sc-upload v-model="scope.row.image" :apiObj="uploadApi" :index="scope.$index" :on-success="success" :on-progress="progress" :width="100" :height="60">
								<div class="custom-empty">
									<i class="el-icon-upload"></i>
									<p>上传图标</p>
								</div>

							</sc-upload>


						</template>
					</el-table-column>
					<el-table-column
						prop="path"
						label="跳转路径"
						width="180">
						<template #default="scope">
							<el-input v-model="scope.row.path" clearable></el-input>
						</template>
					</el-table-column>
					<el-table-column
						prop="path_type"
						label="跳转类型" >
						<template #default="scope">
							<el-input v-model="scope.row.path_type" clearable></el-input>
						</template>
					</el-table-column>
					<el-table-column
						prop="name"
						label="子菜单名称" width="120">
						<template #default="scope">
							<el-input v-model="scope.row.name" clearable></el-input>
						</template>
					</el-table-column>

					<el-table-column
						prop="path_name"
						label="路径名称" width="120">
						<template #default="scope">
							<el-input v-model="scope.row.path_name" clearable></el-input>
						</template>
					</el-table-column>
					<el-table-column label="操作" width="160">
						<template #default="scope">
							<el-button @click="dellist(scope.$index)">删除</el-button>
							<el-button @click="shangyi(scope.$index)">上移</el-button>

						</template>
					</el-table-column>
				</el-table>
			</div>
		</template>
		<template v-if="form.type=='tab'">
			<div style="background: #f1f1f1;border-radius: 4px;padding: 10px">
				<el-button @click="addlist">增加一行</el-button>
				<el-table
					:data="form.content.list"
					style="width: 100%"
					height="250"
					border
					:size="mini"
				>
					<el-table-column
						prop="image"
						label="图标"
						width="130">
						<template #default="scope">

							<sc-upload v-model="scope.row.image" :apiObj="uploadApi" :index="scope.$index" :on-success="success" :on-progress="progress" :width="100" :height="60">
								<div class="custom-empty">
									<i class="el-icon-upload"></i>
									<p>上传图标</p>
								</div>

							</sc-upload>


						</template>
					</el-table-column>
					<el-table-column
						prop="title"
						label="标题" width="120">
						<template #default="scope">
							<el-input v-model="scope.row.title" clearable></el-input>
						</template>
					</el-table-column>

					<el-table-column
						prop="path"
						label="跳转路径"
						width="180">
						<template #default="scope">
							<el-input v-model="scope.row.path" clearable></el-input>
						</template>
					</el-table-column>
<!--					<el-table-column-->
<!--						prop="path_type"-->
<!--						label="跳转类型" >-->
<!--						<template #default="scope">-->
<!--							<el-input v-model="scope.row.path_type" clearable></el-input>-->
<!--						</template>-->
<!--					</el-table-column>-->

					<el-table-column
						prop="path_name"
						label="路径名称" width="120">
						<template #default="scope">
							<el-input v-model="scope.row.path_name" clearable></el-input>
						</template>
					</el-table-column>
					<el-table-column
						prop="background_color"
						label="背景颜色" width="120">
						<template #default="scope">
							<el-input v-model="scope.row.background_color" clearable></el-input>
						</template>
					</el-table-column><el-table-column
						prop="title_color"
						label="标题颜色" width="120">
						<template #default="scope">
							<el-input v-model="scope.row.title_color" clearable></el-input>
						</template>
					</el-table-column>
					<el-table-column label="操作" width="160">
						<template #default="scope">
							<el-button @click="dellist(scope.$index)">删除</el-button>
							<el-button @click="shangyi(scope.$index)">上移</el-button>

						</template>
					</el-table-column>
				</el-table>
			</div>
		</template>
	</el-form>
</template>

<script>
export default {
	props: {
		mode: { type: String, default: "add" }
	},
	data() {
		return {
			uploadApi: this.$API.upload.img,
			//表单数据
			form: {
				id:"",
				type: "menu",
				category: "home",
				name: "",
				content:{}

			},
			//验证规则
			rules: {
				type:[
					{required: true, message: 'type'}
				],
				category: [
					{required: true, message: 'category'}
				],
				name: [
					{required: true, message: '标题'}
				]

			},
		}
	},
	mounted() {
		if(this.mode != 'add'){
			this.rules.password = []
			this.rules.password2 = []
		}
		this.typech()
		// this.getGroup()
	},
	methods: {
		success(res,index){
			this.form.content.list[index].image = res.data
			return false
		},
		dellist(i){
			this.form.content.list.splice(i, 1)
		},
		typech(){
			if(this.form.type=='banner'){
				let data = {
					"name": "sada",
					"style": 1,
					"height": 530,
					"radius": 0,
					"x": 0,
					"y": 0,
					"list": []
				}
				this.form.content = data
			}else if(this.form.type=='menu'){
				let data = {
					"name": "",
					"style": 4,
					"list": []
				}
				this.form.content = data
			}else if(this.form.type=='tab'){
				let data = {
					// "name": "",
					// "style": 4,
					"list": []
				}
				this.form.content = data
			}
		},
		addlist(){
			if(this.form.type=='banner'){
				let data = {
					"name": "",
					"bgcolor": "",
					"image": "",
					"path": "",
					"path_name": "",
					"path_type": 2
				}
				this.form.content.list.push(data)

			}else if(this.form.type=='menu'){
				let data = {
					"name": "",
					"image": "",
					"path": "",
					"path_name": "",
					"path_type": 1
				}
				this.form.content.list.push(data)
			}else if(this.form.type=='tab'){
				let data = {
					"title": "",
					"image": "",
					"path": "",
					"path_name": "",
					"path_type": 1,
					"background_color":"#fff",
					"title_color":"#000"
				}
				this.form.content.list.push(data)
			}
		},
		shangyi(index){
			if(index!=0){
				this.form.content.list[index] = this.form.content.list.splice(index-1, 1, this.form.content.list[index])[0];
			}else{
				this.form.content.list.push(this.form.content.list.shift());
			}
		},

		//加载树数据
		async getGroup(){
			var res = await this.$API.role.select.get();
			this.groups = res.data;
		},
		//表单提交方法
		submit(callback){
			console.log(this.form)
			this.form.content = JSON.stringify(this.form.content)
			this.$refs.dialogForm.validate((valid) => {
				if (valid) {
					callback(this.form)
				}else{
					return false;
				}
			})
		},
		//表单注入数据
		setData(data){
			console.log(data)
			// this.form.id = data.id
			// this.form.userName = data.userName
			// this.form.avatar = data.avatar
			// this.form.name = data.name
			// this.form.group = data.group

			//可以和上面一样单个注入，也可以像下面一样直接合并进去
			Object.assign(this.form, data)
		}
	}
}
</script>

<style>
</style>
